<template>
  <div class="container-full">
    <div class="toolbar">
      <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn" @click="close()">
          <i class="iconfont icon-shangyibu1"></i> 返回
        </button>
      </div>
    </div>
    <div class="page-body">
      <h3 style="padding-bottom:25px;padding-top:15px">订单: {{order.order_sn}}</h3>
      <table class="table">
        <colgroup>
          <col width="90px">
          <col>
          <col width="90px">
          <col>
        </colgroup>
        <tbody>
          <tr>
            <td>买家</td>
            <td>{{order.buyer_name}}</td>
            <td>电话</td>
            <td>{{order.buyer_mobile}}</td>
          </tr>
          <tr>
            <td>金额</td>
            <td>{{order.goods_amount}}</td>
            <td>支付方式</td>
            <td>{{order.payment_name}}</td>
          </tr>
          <tr>
            <td>下单时间</td>
            <td>{{this.$helper.toDate(order.add_time)}}</td>
            <td>完成时间</td>
            <td>{{this.$helper.toDate(order.finished_time)}}</td>
          </tr>
          <tr>
            <td>联系人</td>
            <td>{{order.extm.consignee}}</td>
            <td>联系电话</td>
            <td>{{order.extm.phone_mob}}</td>
          </tr>
          <tr>
            <td>详细地址</td>
            <td colspan="3">{{order.extm.region_name}} {{order.address}}</td>
          </tr>
        </tbody>
      </table>
      <!-- <form role="form">
        <div class="form-group">
          <label class="control-label">完成时间</label>
          <input class="form-control" v-model="order.finished_time" disabled="disabled">
        </div>
      </form> -->
      <h3 style="padding-bottom:25px">订单明细:</h3>
      <table v-if="order.items" class="table">
        <thead>
          <tr>
            <th>行号</th>
            <th>商品</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
          </tr>
        </thead>
        <tbody>
          <tr :key="index" v-for="(item, index) in order.items">
            <td>{{index + 1}}</td>
            <td>{{item.goods_name}}</td>
            <td>{{item.price}}</td>
            <td>{{item.quantity}}</td>
            <td>{{item.quantity * item.price}}</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="5" style="text-align:right;padding-top:15px">合计金额: <b>{{totals}}</b></td>
            <!-- <td></td>
                  <td></td>
                  <td></td>
            <td></td>-->
          </tr>
        </tfoot>
      </table>      
    </div>
  </div>
</template>
<script>
export default {
  name: "OrderDetails",
  data() {
    return {
      order: { extm: {} }
    };
  },
  methods: {
    close() {
      this.$router.push({ path: "/order/index" });
    }
  },
  computed: {
    quantity: function() {
      var sum = 0;
      var items = this.order.items;
      if (items) {
        for (var i = 0; i < items.length; i++) {
          var item = items[i];
          sum = sum + parseInt(item.quantity);
        }
      }

      return sum;
    },
    totals: function() {
      var sum = 0;
      var items = this.order.items;
      if (items) {
        for (var i = 0; i < items.length; i++) {
          var item = items[i];
          var q = parseInt(item.quantity);
          sum = sum + q * item.price;
        }
      }

      return sum;
    }
  },
  mounted() {
    const router = this.$router;
    var query = router.currentRoute.query;
    var orderId = query["id"];
    console.log("orderId = ", orderId);

    var user = this.$user;
    user.getOrder(orderId).then(r => {
      console.log(r);

      if (r.data.success) {
        this.order = r.data.data;

        console.log(this.order.buyer_name);
      } else {
      }
    });
  }
};
</script>
<style lang="scss" scoped>
.container-full {
  width: 100%;
  height: 100%;
  position: relative;
  padding-top: 50px;
  padding-bottom: 15px;
}

.page-body {
  padding: 15px;
  background-color: #fff;
  height: 100%;
  max-width: 29.7cm;
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
  box-shadow: 0 0 0 1px rgba(20, 20, 31, 0.05),
      0 1px 3px 0 rgba(20, 20, 31, 0.15);
}
</style>

